<script setup lang="ts" name="art">
import { artHandle } from '@/hooks/art/artHandle'

const {
    // 获取列表
    loading,  //表格加载中
    tableData, //表格数据
    pageTotal, //数据总条数
    getData,    //分页信息
    handleCurrentChange, // 页码改变重新请求列表

    // 按钮操作
    drawer,    //是否显示抽屉弹窗
    typeIndex, //抽屉弹窗标题下标
    handleType, //抽屉弹窗标题下标对应的标题
    showDrawer, // 点击添加用户按钮显示抽屉弹窗
    handleClose, // 右上角关闭抽屉弹窗
    cancelClick, // 点击抽屉弹窗底部关闭按钮隐藏弹窗
    formData, //表单数据
    formRef, // 表单对象
    rules, //表单规则
    submitForm, //提交表单
    delMenu, //删除菜单
    isShowChange, // 是否开启

    fileList,  //上传图片列表
    uploadUrl,  //上传图片地址
    headers,    //上传头部
    handleSuccess, //上传成功处理
    handleError, //上传失败处理
    handleRemove, //删除图片

    ac_name, //选中内容
    description, //搜索内容
    decOptions, //栏目列表
    scopePage, //栏目分类信息
    getDescriptions, //搜索栏目内容
    selectChange, //选择搜索栏目内容,
    changeQEditor, //修改编辑器值
} = artHandle();

const defaultProps = {
    children: 'children',
    label: 'title',
}

</script>

<template>
    <div style="text-align: center; color: #666;">
        <div v-permissionList="'artList'">
            <el-card shadow="never" style="text-align: right;" v-permission="'addArt'">
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" @click="showDrawer(0)">新增文章</el-button>
                    </el-col>
                </el-row>
            </el-card>
            <el-card shadow="never">
                <el-table :data="tableData" stripe border v-loading="loading">
                    <el-table-column prop="id" label="编码" width="60" />
                    <el-table-column label="图片" width="80">
                        <template #default="scoped">
                            <el-image style="width: 60px; height: 60px" :src="scoped.row.url" fit="cover" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="标题" />
                    <el-table-column label="是否开启" sortable>
                        <template #default="scoped">
                            <el-switch v-model="scoped.row.switch" @change="isShowChange($event, scoped.row)"
                                v-permissionSwitch="'artIsShow'" :data-value="scoped.row.switch" />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scoped">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="showDrawer(1, scoped.row)"
                                    v-permission="'editArt'">编辑</el-button>
                                <el-button type="danger" size="small" @click="delMenu(scoped.row)"
                                    v-permission="'delArt'">删除</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="never">
                <el-pagination background layout="prev, pager, next" :page-size="getData.size" :total="pageTotal"
                    @currentChange="handleCurrentChange" />
            </el-card>
        </div>
    </div>
    <!-- 抽屉弹出 -->
    <el-drawer v-model="drawer" :before-close="handleClose" v-if="drawer">
        <template #header>
            <h4>{{ handleType[typeIndex] }}</h4>
        </template>
        <template #default>
            <div>
                <el-form ref="formRef" :model="formData" :rules="rules" hide-required-asterisk>
                    <el-form-item label="所属栏目">
                        <UiSelect v-model:val="ac_name" v-model:pageData="scopePage" placeholder="请选择" width="150px"
                            :options="decOptions" background @pageChange="getDescriptions" @update:val="selectChange">
                            <template #header>
                                <div class="scope_header">
                                    <el-input v-model="description" placeholder="请输入关键字">
                                        <template #append>
                                            <el-icon style="cursor: pointer" @click="getDescriptions">
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>
                            </template>
                        </UiSelect>
                    </el-form-item>

                    <el-form-item label="文章标题" prop="name">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                    <el-form-item label="上传图片">
                        <pro-upload-img :fileList="fileList" :action="uploadUrl" :headers="headers" :maxSize="1"
                            :limit="1" accept=".jpg,.png" tip="支持jpg、png格式，大小不超过2MB" @success="handleSuccess"
                            @error="handleError" @remove="handleRemove"/>
                    </el-form-item>

                    <el-form-item label="文章内容">
                        <qEditor :value="formData.content" @updateValue="changeQEditor"/>
                    </el-form-item>
                    <el-form-item label="文章排序">
                        <el-input-number :min="0" :max="9999999" v-model="formData.sort" />
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="formData.is_show" />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">关闭</el-button>
                <el-button type="primary" @click="submitForm(formRef)">{{ handleType[typeIndex] }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.del-bnt {
    margin-bottom: 10px;
}
</style>